<template>
    <div class="product-detail">
      <div class="header">
        <img :src="product.image" alt="产品图片" class="product-image" />
        <div class="product-info">
          <h1>{{ product.name }}</h1>
          <div class="detail-list">
            <p><strong>生产日期:</strong> {{ product.productionDate }}</p>
            <p><strong>保质期:</strong> {{ product.shelfLife }} 天</p>
            <p><strong>生产企业:</strong> {{ product.manufacturer }}</p>
          </div>
          <button class="add-button" @click="addProduct"> +1 </button>
        </div>
      </div>
  
      <div class="additional-sections">
        <div class="additional-info">
          <h2>产品检验报告</h2>
          <table>
            <tr>
              <th>检测项目</th>
              <td>{{ product.testItem }}</td>
            </tr>
            <tr>
              <th>检测结果</th>
              <td>{{ product.testResult }}</td>
            </tr>
          </table>
        </div>
  
        <div class="preservation-info">
          <h2>保鲜信息</h2>
          <div v-for="(info, index) in preservationInfo" :key="index" class="info-row">
            <p><strong>保鲜天数:</strong> {{ info.days }}</p>
            <p><strong>保鲜方法:</strong> {{ info.method }}</p>
            <button @click="editPreservation(info)">修改</button>
            <button @click="deletePreservation(info)">删除</button>
          </div>
          <button class="add-button" @click="addPreservation">添加保鲜信息</button>
        </div>
  
        <div class="document-info">
          <h2>动证书</h2>
          <button class="add-button" @click="addDocument">添加文件</button>
          <div class="documents">
            <div class="document" v-for="doc in documents" :key="doc.id">
              <img :src="doc.url" alt="证书" class="document-image" />
            </div>
          </div>
        </div>
  
        <div class="enterprise-info">
          <h2>企业信息</h2>
          <div class="detail-list">
            <p><strong>企业名称:</strong> {{ enterprise.name }}</p>
            <p><strong>地区:</strong> {{ enterprise.region }}</p>
            <p><strong>财产:</strong> {{ enterprise.assets }} 元</p>
          </div>
        </div>
  
        <div class="enterprise-photos">
          <h2>企业照片</h2>
          <button class="add-button" @click="addEnterprisePhoto">添加照片</button>
          <div class="photos">
            <img v-for="(photo, index) in enterprisePhotos" :key="index" :src="photo" alt="企业照片" class="photo" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import axios from 'axios';
  
  export default defineComponent({
    setup() {
      const product = ref<any>({}); // 产品信息
      const preservationInfo = ref<any[]>([]); // 保鲜信息列表
      const documents = ref<any[]>([]); // 动证书
      const enterprise = ref<any>({}); // 企业信息
      const enterprisePhotos = ref<string[]>([]); // 企业照片
  
      // 获取产品详情
      const fetchProductDetail = async () => {
        try {
          const response = await axios.get('/api/product/1'); // 假设API返回产品数据
          product.value = response.data.product;
          preservationInfo.value = response.data.preservationInfo;
          documents.value = response.data.documents;
          enterprise.value = response.data.enterprise;
          enterprisePhotos.value = response.data.enterprisePhotos;
        } catch (error) {
          console.error(error);
        }
      };
  
      const addProduct = async () => {
      try {
        const productData = {
          A: '字段A的值', // 替换为实际的值
          B: '字段B的值', // 替换为实际的值
          C: '字段C的值'  // 替换为实际的值
        };
    
        const response = await axios.post('http://192.168.6.6:9999/api/addProduct', productData);
        console.log('产品添加成功:', response.data);
        // 根据需要处理响应数据
      } catch (error) {
        console.error('添加产品时出错:', error);
      }
    };
  
      // 添加保鲜信息逻辑
      const addPreservation = () => {
        // 实现添加保鲜信息的逻辑
      };
  
      // 编辑保鲜信息逻辑
      const editPreservation = (info: any) => {
        // 实现编辑保鲜信息的逻辑
      };
  
      // 删除保鲜信息逻辑
      const deletePreservation = (info: any) => {
        // 实现删除保鲜信息的逻辑
      };
  
      // 添加文件的逻辑
      const addDocument = () => {
        // 实现添加文件的逻辑
      };
  
      // 添加企业照片的逻辑
      const addEnterprisePhoto = () => {
        // 实现添加企业照片的逻辑
      };
  
      onMounted(() => {
        fetchProductDetail();
      });
  
      return {
        product,
        preservationInfo,
        documents,
        enterprise,
        enterprisePhotos,
        addProduct,
        addPreservation,
        editPreservation,
        deletePreservation,
        addDocument,
        addEnterprisePhoto
      };
    },
  });
  </script>
  
  <style scoped>
  .product-detail {
    padding: 20px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
  }
  
  .header {
    display: flex;
    align-items: flex-start;
  }
  
  .product-image {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .product-info {
    flex: 1;
  }
  
  .detail-list {
    margin-bottom: 10px;
  }
  
  .additional-sections {
    margin-top: 20px;
  }
  
  .additional-info, .preservation-info, .document-info, .enterprise-info, .enterprise-photos {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
  }
  
  .document {
    display: inline-block;
    margin: 10px;
  }
  
  .document-image, .photo {
    width: 100px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .add-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .add-button:hover {
    background-color: #45a049;
  }
  
  .document-image, .photo {
    margin-right: 10px;
  }
  </style>
  